<script setup lang="ts">
import { ref,defineEmits,getCurrentInstance } from "vue"
const {proxy} = getCurrentInstance();
const emit = defineEmits(['changeHeaderCSS']);
const changeHeaderCSS = (flag:boolean)=>{
  emit('changeHeaderCSS',flag);
}
const underHeader = ref();
// 监听元素是否在可视区域内组件
import { useIntersectionObserver } from '@vueuse/core'
//调用这个函数useIntersectionObserver，里面传三个参数
// 1. stop 是一个函数。如果调用它，就会停止观察（是否进入或移出可视区域的行为）
// 2. target 是观察的目标容器 dom对象 | 组件对象
// 3. isIntersecting 是一个bool值，表示是否进入可视区域。 true表示 进入 false表示 移出\
const { } = useIntersectionObserver(
  underHeader,// target 是vue的对象引用。是观察的目标
  // isIntersecting 是否进入可视区域，true是进入 false是移出
  // observerElement 被观察的dom
  ([{ isIntersecting }]: any) => {
    if (isIntersecting) {
      // 子组件监听进入可视区域调用父组件方法
      //进入可视区域
      changeHeaderCSS(false)
    } else {
      changeHeaderCSS(true);
    }
  },
  // threshold 表示观察的目标进入视口的比例，取值范围是从 0 到 1
  // 默认是0.1。 值越大表示观察越不灵敏
  { threshold: 0.1 }
)
import {useRouter} from 'vue-router'
const router = useRouter();
const currentId = router.currentRoute.value.params.id;
const currentIdea = ref();
//根据id获取数据
const getIdeaById = async ()=>{
  let result = await proxy.Request({
     url:"/idea/getIdeaById",
     params:{
      id:currentId
     }
  })
  if(!result){
    return;
  }
  currentIdea.value = result.data;
}
getIdeaById();
</script>

<template>
  <div class="service">
    <div ref="underHeader"></div>
    <div class="box">
      <!-- 新闻详情布局容器 -->
      <el-row justify="center" v-if="currentIdea">
        <el-col :span="8" :xs="24" :sm="24" :md="24" :lg="8">
          <!-- 日期 -->
          <div class="date">
            <p class="date-text">{{ currentIdea.createDate }}</p>
            <p class="under">观点</p>
          </div>
        </el-col>
        <el-col :span="16" :xs="24" :sm="24" :md="24" :lg="16">
          <div class="id-content">
            <div class="id-title">
              {{currentIdea.title}}
            </div>
            <el-divider></el-divider>
            <div v-html="currentIdea.content"></div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.box{
  padding: 100px 5%;
  max-width: 1200px;
  margin: 0 auto;
  .date{
    .date-text{
      font-size: 20px;
      margin-bottom: 10px;
    }
  }
  .id-content{
    .id-title{
      font-size: 24px;
      color: black;
    }
  }
  .text{
    padding: 40px 0;
  }
  .news-row{
    margin: 50px 0;
  }
}
</style>